﻿@model IEnumerable<PhotoVM>
@{
    ViewBag.Title = "Customer Photos";
    Layout = "~/Views/Shared/_AboutLayout.cshtml";

    int i = 0;
}
@section header{
    <link rel="stylesheet" href="/scripts/lib/jquery/plugins/bxslider/jquery.bxslider.css">
}

<main class="page-about page-sample">
    <div class="content">
        <h1>Customer photos</h1>
        <div class="slider-container">
            <ul class="bxslider">
               @foreach (var item in Model)
               {
                <li>
                    <figure>
                        <img src="@item.FullImageUrl" />
                        <figcaption>@item.Title</figcaption>
                    </figure>
                </li>
               }

            </ul>
            <span id="slider-prev" class="arrow prev"></span>
            <span id="slider-next" class="arrow next"></span>
        </div>

        <ul id="bx-pager" class="thumbs">
           @foreach (var item in Model)
           {
            <li>
                <a data-slide-index="@i" href=""><img src="@item.Thumbnail" /></a>
            </li>
               i++;
           }
        </ul>
    </div>
</main>

@section footer{
    <script src="/scripts/lib/jquery/plugins/bxslider/jquery.bxslider.min.js"></script>
    <script>
    $(document).ready(function () {
        $('.bxslider').bxSlider({
            pagerCustom: '#bx-pager',
            nextSelector: '#slider-next',
            prevSelector: '#slider-prev',
            nextText: '<i class="iconfont icon-iconnext"></i>',
            prevText: '<i class="iconfont icon-iconprev"></i>'
        });

        $('.thumbs').bxSlider({
            slideWidth: 176,
            minSlides: 4,
            maxSlides: 7,
            moveSlides: 1,
            infiniteLoop: false,
            slideMargin: 10,
            pager: false
        });
    });
    </script>

}
